<template>
  <div class="echart" ref='allStraff'>
  
    <ul style="margin-bottom:40px">
      <el-collapse-transition>
        <li v-if='c1.close'>
          
          <div>
    
            <h3 class='title'>
    
              <span>员工分布</span>
    
              <span>
    
                <i class="fa fa-minus" v-if='c1.min' @click.stop='c1.min = false'></i>

                <i class="fa fa-plus" v-else @click.stop='c1.min = true'></i>

                <i class="fa fa-times" @click.stop='c1.close = false'></i>

              </span>
    
            </h3>
    
            <el-collapse-transition>
    
              <div class='content1' v-show='c1.min'>
    
    
                <div class="wrapper">
    
                  <h3><span>#</span><span>单位</span><span>人数</span><span>占比</span></h3>
    
                  <div v-if='title' v-for='(k,i) in resComputed.distribution'>
    
                    <span>{{i+1}}</span><span>{{k.descrshort}}</span><span>{{k.jobempcount}}</span><span>{{k.jobempscale}}</span>
    
                  </div>
    
                  <div v-if='!title' v-for='(k,i) in resComputed.distribution'>
    
                    <span>{{i+1}}</span><span>{{k.descrshort}}</span><span>{{k.descrcount}}</span><span>{{k.descrscale}}</span>
    
                  </div>
    
    
    
                </div>
    
              </div>
    
    
            </el-collapse-transition>
    
    
          </div>
          
        </li>
      </el-collapse-transition> 

      <el-collapse-transition>

        <li v-if='c2.close'>
    
          <h3 class='title'>
    
            <span>员工性别比例</span>
    
            <span>
    
              <i class="fa fa-minus" v-if='c2.min' @click.stop='c2.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c2.min = true'></i>

              <i class="fa fa-times" @click.stop='c2.close = false'></i>

            </span>
    
          </h3>


          <el-collapse-transition>

            <div v-show='c2.min' id='content2' style='width:100%;height:420%'></div>

          </el-collapse-transition> 

        </li>
      </el-collapse-transition> 


      <el-collapse-transition>
        <li v-if='c3.close'>
    
          <h3 class='title'>
    
            <span>员工学历结构</span>
    
            <span>
      
                <i class="fa fa-minus" v-if='c3.min' @click.stop='c3.min = false'></i>

                <i class="fa fa-plus" v-else @click.stop='c3.min = true'></i>

                <i class="fa fa-times" @click.stop='c3.close = false'></i>

            </span>
    
          </h3>
          
          <el-collapse-transition>

             <div id='content3' v-show='c3.min' style='width:100%;height:420%'></div>
          </el-collapse-transition> 
        </li>
      </el-collapse-transition> 

      <el-collapse-transition>

        <li v-if='c4.close'>
    
          <h3 class='title'>
    
            <span>员工年龄结构</span>
    
            <span>
      
              <i class="fa fa-minus" v-if='c4.min' @click.stop='c4.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c4.min = true'></i>

              <i class="fa fa-times" @click.stop='c4.close = false'></i>

            </span>
    
          </h3>


          <el-collapse-transition>
            <div v-show='c4.min' id='content4' style='width:100%;height:420%'></div>
          </el-collapse-transition> 
    
        </li>
      </el-collapse-transition> 
  
  
    </ul>
  
  
  
  
  
    <el-dialog :visible.sync="dialogTableVisible" size='' top='4vh'>
  
      <el-table :data="tableData"  stripe style="width:800px">
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
  
        <el-table-column label="操作">
  
          <template slot-scope="scope">
            <el-button 
              size="mini"
              type="primary"
              @click="ComputedEmplid(scope)">员工履历信息</el-button>
          </template>
        </el-table-column>
      </el-table> 
    
          <el-pagination
              @current-change='currentChange'	
              :page-size="10"
              layout="total, prev, pager, next"
              :total="total"
               style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <!-- <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span> -->
        </el-dialog>
    </div>
</template>

<script>
import echarts from 'echarts'

import Vue from 'vue'

import URL from '../../common/js/dataLookUrl'

import {

	Table,

	TableColumn,

	Dialog,

	Button,

	Pagination

} from 'element-ui'

import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import { _encode} from '@/common/js/handleCode'

Vue.component(CollapseTransition.name, CollapseTransition)



Vue.use(Table)

Vue.use(TableColumn)

Vue.use(Dialog)

Vue.use(Button)

Vue.use(Pagination)



export default {

	data () {

		return {

			c1: {

				min: true,

				close: true

			},

			c2: {

				min: true,

				close: true

			},

			c3: {

				min: true,

				close: true

			},

			c4: {

				min: true,

				close: true

			},

			tableData: [],

			total: 0,

			dialogTableVisible: false,

			details: '',

			type: 0,

			ageRange: '',

			sex: '',

			highestEdu: ''

		}

	},



	props: ['res', 'title', 'subhead'],



	computed: {

		resComputed () {

			return this.res

		},

		deptCategory () {

			return this.subhead

		}

	},

	watch: {

		res (newValue, oldValue) {

			if (newValue !== oldValue) {

				this.setEcharts()

			}

		}

	},

	mounted () {

		this.setEcharts()

	},

	methods: {

		ComputedEmplid (data) {

			const sex = data.row.sex_descr=='女'?2:1
			const params = {
				emplid: data.row.emplid,
				resumeType: 2,
				sex
			}

			window.open('/module/resume.html?' + _encode(JSON.stringify(params)))

		},

		setEcharts () {



			if (this.$refs.allStraff) {

				/* 员工性别比例 */



				{

					let data = [{

						value: this.res.headquarters.boycount,

						name: `男：${this.res.headquarters.boycount}人(${this.res

							.headquarters.boyscale})`

					},

					{

						value: this.res.headquarters.girlcount,

						name: `女：${this.res.headquarters.girlcount}人(${this.res

							.headquarters.girlscale})`

					},

					{

						value: this.res.headquarters.othercount,

						name: `未知：${this.res.headquarters.othercount}人(${this.res

							.headquarters.otherscale})`

					}

					]



					this.$nextTick(function () {

						this.drawPie('#content2', data.filter(ele=>ele.value!=0), '员工性别比例')

					})

				}



				/* 员工学历结构 */



				{

					let dataArr = []



					this.res.education.forEach((ele, i) => {

						dataArr.push({

							value: this.res.education[i].educount,

							name: `${this.res.education[i].highest_edu || '未填写'}：${this.res

								.education[i].educount}人(${this.res.education[i].eduscale})`

						})

					}, this)



					this.$nextTick(function () {

						this.drawPie('#content3', dataArr.filter(ele=>ele.value!=0), '员工学历结构')
					})

				}



				/* 员工年龄结构 */



				{

					let data = [{

						value: this.res.headquarters.thirtybelowcount,

						name: `30岁以下：${this.res.headquarters.thirtybelowcount} 人(${this

							.res.headquarters.thirtybelowscale})`

					},

					{

						value: this.res.headquarters.thirtytofortycount,

						name: `30岁到40岁：${this.res.headquarters

							.thirtytofortycount} 人(${this.res.headquarters

							.thirtytofortyscale})`

					},

					{

						value: this.res.headquarters.fortytofiftyswcount,

						name: `40岁到45岁：${this.res.headquarters

							.fortytofiftyswcount} 人(${this.res.headquarters

							.fortytofiftyswscale})`

					},

					{

						value: this.res.headquarters.fortytofiftysycount,

						name: `45岁到50岁：${this.res.headquarters

							.fortytofiftysycount} 人(${this.res.headquarters

							.fortytofiftysyscale})`

					},

					{

						value: this.res.headquarters.fiftyabovecount,

						name: `50岁以上：${this.res.headquarters.fiftyabovecount} 人(${this.res

							.headquarters.fiftyabovescale})`

					}

					]



					this.$nextTick(function () {

						this.drawPie('#content4', data.filter(ele=>ele.value!=0), '员工年龄结构', '55%', false, 'radius')
						console.log(data,'datadatadatadatadata')

					})

				}

			}

		},

		drawPie (id, datas, name, type = '60%', showFlag = false, roseType = '') {

			this.charts = echarts.init(this.$refs.allStraff.querySelector(id))

			this.charts.setOption({

				tooltip: {

					trigger: 'item',

					formatter: '{b}'

				},

				legend: {

					show: showFlag,

					x: 'left',

					left: '15px',

					top: '10px',

					data: datas,

					formatter: function (val) {

						return val.split(':')[0]

					}

				},

				series: [{

					name: name,

					type: 'pie',

					radius: type,

					center: ['50%', '50%'],

					data: datas,

					roseType: roseType,

					label: {

						normal: {

							show: true,

							formatter: function (val) {

								return val.name.split('：').join('\n')

							}

						}

					}



					// labelLine: {

					//   normal: {

					//     lengh: 30,

					//     length2: 30

					//   }

					// }

				}]

			})



			this.charts.on('click', echartsData => {

				if (this.$route.name == 'allStaff') {

					let Dataname = echartsData.data.name.split('：')[0]

					this.ageName = ''

					this.sex = ''

					this.highestEdu = ''

					switch (Dataname) {

					case '30岁以下':

						this.ageName = 'thirtybelow'

						break

					case '30岁到40岁':

						this.ageName = 'thirtytoforty'

						break



					case '40岁到45岁':

						this.ageName = 'fortysvfifty'

						break

					case '45岁到50岁':

						this.ageName = 'fortysyfifty'

						break

					case '50岁以上':

						this.ageName = 'fiftyabove'

						break

					case '男':

						this.sex = 'M'

						break

					case '女':

						this.sex = 'F'

						break

					case '未知':

						this.sex = 'Y'

						break

					case '未填写':

						this.highestEdu = 'empty'

						break

					default:

						this.highestEdu = Dataname

						break

					}



					let params = {}



					if (this.ageName) {

						params = {

							ageRange: this.ageName,

							pageNum: 1,

							pageSize: 10

						}

					} else if (this.sex) {

						params = {

							sex: this.sex,

							pageNum: 1,

							pageSize: 10

						}

					} else {

						params = {

							highestEdu: this.highestEdu,

							pageNum: 1,

							pageSize: 10

						}

					}





					this.Axios.Post(URL.getemployeeByallList.url, params)

						.then(res => {

							this.tableData = res.data.datas

							this.total = res.data.total

						})

					this.dialogTableVisible = true

				} else {

					this.type = ''

					this.details = ''

					let types = echartsData.seriesName

					this.details = echartsData.name.split('：')[0]



					switch (this.details) {

					case '30岁以下':

						this.details = 'thirtybelow'

						break

					case '30岁到40岁':

						this.details = 'thirtytoforty'

						break



					case '40岁到45岁':

						this.details = 'fortysvfifty'

						break

					case '45岁到50岁':

						this.details = 'fortysyfifty'

						break

					case '50岁以上':

						this.details = 'fiftyabove'

						break

					}



					switch (types) {

					case '员工性别比例':

						this.type = 1

						break

					case '员工学历结构':

						this.type = 2

						break

					case '员工年龄结构':

						this.type = 3

						break

					default:

						break

					}



					let params = {

						type: this.type,

						deptCategory: this.deptCategory,

						details: this.details,

						pageNum: 1,

						pageSize: 10

					}



					this.dialogTableVisible = true



					if (this.$route.name == 'allStaff') {

						this.Axios.Post(URL.getemployeeByallList.url, params).then(res => {

							this.tableData = res.data.datas

							this.total = res.data.total

						})

					} else {





						this.Axios.Post(URL.queryListByType.url, params).then(res => {

							this.tableData = res.data.datas

							this.total = res.data.total

						})

					}





				}

			})

		},

		currentChange (index) {

			if (this.$route.name == 'allStaff') {



				let params = {}

				let pageNum = index

				if (this.ageName) {

					params = {

						ageRange: this.ageName,

						pageNum: pageNum,

						pageSize: 10

					}

				} else if (this.sex) {

					params = {

						sex: this.sex,

						pageNum: pageNum,

						pageSize: 10

					}

				} else {

					params = {

						highestEdu: this.highestEdu,

						pageNum: pageNum,

						pageSize: 10

					}

				}



				this.Axios.Post(URL.getemployeeByallList.url, params).then(res => {

					this.tableData = res.data.datas

					this.total = res.data.total

				})

			} else {

				let params = {

					type: this.type,

					deptCategory: this.deptCategory,

					details: this.details,

					pageNum: index,

					pageSize: 10

				}



				this.Axios.Post(URL.queryListByType.url, params).then(res => {

					this.tableData = res.data.datas

					this.total = res.data.total

				})

			}

		}

	}

}
</script>

<style scoped>
.echart {
  margin-top: 20px;
}

.echart ul {
  overflow: hidden;
}

.echart li {
  border-top-width: 3px;

  border-top-style: solid;

  border-top-color: #00a65a;

  width: 48.5%;

  margin-bottom: 30px;

  overflow: hidden;

  float: left;
}

.echart li div,
.echart li h3 {
  background-color: #fff !important;
}

.echart li:nth-of-type(2n-1) {
  margin-right: 3%;
}

.echart .title {
  border-bottom: 1px solid #f1f1f1;

  line-height: 40px;

  overflow: hidden;

  padding: 0 10px;
}

.echart .title span:first-of-type {
  float: left;

  font-size: 18px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(68, 68, 68);

  font-weight: normal;
}

.echart .title span:last-of-type {
  font-size: 14px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(151, 160, 179);

  font-weight: normal;

  float: right;
}

.echart .title span:last-of-type i {
  margin-left: 10px;
}

.echart .title i {
  cursor: pointer;
}

.content1 {
  padding: 12px 10px;
}

.content1 .wrapper {
  border: 1px solid #f4f4f4;
}

.content1 .wrapper div {
  width: 100%;

  overflow: hidden;
}

.content1 .wrapper div:nth-of-type(2n-1) {
  background-color: #f9f9f9;
}

.content1 .wrapper h3 {
  width: 100%;

  overflow: hidden;

  background-color: #f5f5f6;
}

.content1 .wrapper > div > span,
.content1 .wrapper > h3 > span {
  border-right: 1px solid #f4f4f4;

  float: left;

  width: 25%;

  text-align: center;

  padding: 4px 0;
}

.content1 .wrapper > div > span:last-of-type,
.content1 .wrapper > h3 > span:last-of-type {
  border-right: 0px solid black;
}

.content1 .wrapper > div > span:nth-of-type(1),
.content1 .wrapper > h3 > span:nth-of-type(1) {
  width: 8.3333%;
}

.content1 .wrapper > div > span:nth-of-type(2),
.content1 .wrapper > h3 > span:nth-of-type(2) {
  width: 41.66666%;
}
</style>